javascript 入门

1. 它是个编程语言.(跟java, ruby, python一样的,功能齐全的语言) 虽然html, css也是语言, 但是他们属于 某个领域的语言(没有计算功能. 没有函数)

2. js 在web 前端, 跟 html dom (html中的div, p, 这样结构) 有极大的关系, 跟css也有很大关系. 可以说,js ,可以直接操作html元素, 也可以直接操作css样式.

例如: 我们可以声明一个元素的css:

lalala

// 借助于 jQuery,我们可以达到同样的目的. // jQuery('#lala').css({color: 'red', height: 100})

jQuery相对于 原生js, 最大的特点: 对程序员特别方便.

例如: native: getElementById. getElementsByName jQuery : $('#id') $('p') jQuery('p') // $ 就是 jQuery的 别名.

再比如: 如果要做一段 动画.

原生: 100 行代码. 在不同的浏览器里面, 表现结果不同. 还得做不同的适配.

jQuery: 所有的主流浏览器(包括IE 7+ 系列)都兼容. 代码; 2行.

有个js 框架的发展历程:

1. native js 时代: 2009年以前. 大家都手写原生js, 痛苦的要死.完全无法维护. 做 java/.net 的人,也完全不屑去 做js. 大家都认为: js 就是个残疾语言. 在不同的浏览器表现不同. 而且有时候表现不一样. a = 0 , a == 0 //true, 0 == a //false

而且: 做后端的(java), 绝对看不起做前端的(html, css ,js ). 认为前端太简单. 就好像: 鄙视链: c > c++ > java > ... > php

09年前, 没有人是专职做 js. (起码没有好手这么做)

1. prototype. 这是第一个出现的 js 开源框架. (也有其他的 ext js, 但是不开源.现在国人也没有太墙裂的付费习惯.所以没有流行) prototype 比 raw js 要好太多. 但是还是有很多地方不那么直观

2. jQuery: 于是一个大牛,就开始"重构" (代码的行为不变, 结构变了,重构有上百种手法. extract method, rename ... <> ) prototype, 重构完了, jQuery就诞生了. 由于重构的 最大目的,是为了提高: 可用性,提高 可读性. 所以你会发现: jQuery 特别接近于: 自然语言.

$('#test').css({height: 50}).animate({ opacity: 1 }, 1000)

jQuery 的几个最大作用

1. 操作Dom.

$('#id').remove

$('#parent').append("在后面追加")

$('.some_class').prepend("

我在前面追加...

$('#known_td_id').nearest("div") .children('ul').children("li").last() 获取到目标dom. 获取最上级中的div. 获取到 ul

上面的操作,在jquery出现之前, 用prototype,很难做到. 用raw js, 无法做到.

我们会发现; 在jquery中,特别自然,特别流畅.

1. jQuery: 做动画特效.

$('#test').css({height: 50}).animate({ opacity: 1 }, 1000)

1. jQuery: 做Ajax 操作.

向远程服务器发起一个 get 请求:

jQuery.ajax('get', '/interface/books', { success: function() { ... }, error: function() { ... } })

也可以写成:

jQuery.get("/interface/books", function(){ // 操作成功后的操作. })

1. 大家写的各种各样的jquery plugins. (这些,都是我们最常见的 plugins , 每个,都要学会! 不分哪些有用 哪些没用. 我已经把实战用到的,比较重要的,都列出来了)

各种有用的第三方js组件 jquery-ui.com 提供了很多组件.

表单验证 (form validation)

日期选择框 (datepicker)

上传图片( file uploader)

多选过滤下拉单 (dropdown)

幻灯片(slider)

标签页(tabs)

弹出的窗口 ( dialog )

标签(tags)

树状菜单 (tree)

提示框(tooltip)

限制性输入框(masked input)

地图(map)

快捷编辑( inplace editor)

统计图表( chart)

进度条(progress bar)

动画效果(animation)